<!--
 * @Author: Sam
 * @Date: 2020-10-22 11:51:41
 * @LastEditTime: 2020-11-25 09:29:50
 * @LastEditors: Sam
 * @Description:
 * @FilePath: \thework\ygboost-eui\src\components\app\edit\setting\packproduct\packproductEdit.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="padding-lr-xl ">
    <el-card>
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">产品信息</span>
      </div>
      <el-form :model="form" ref="basisForm" :rules="rules" size="mini">
        <el-row>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_shippingtypeid')}：`"
              label-width="120px"
              prop="shippingTypeId"
            >
              <el-select
                size="mini"
                v-model="form.shippingTypeId"
                placeholder="请选择渠道类型"
                disabled
              >
                <el-option
                  v-for="(item, value) in shippingTypesMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_code')}：`"
              label-width="120px"
              prop="code"
            >
              <el-input size="mini" v-model="form.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_minweight')}：`"
              label-width="120px"
            >
              <el-input size="mini" v-model="form.minWeight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_arrivetime')}：`"
              label-width="120px"
            >
              <el-input size="mini" v-model="form.arriveTime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_name')}：`"
              label-width="120px"
              prop="name"
            >
              <el-input size="mini" v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_status')}：`"
              label-width="120px"
              prop="status"
            >
              <el-select
                size="mini"
                v-model="form.status"
                placeholder="请选择状态"
              >
                <!-- <el-option label="启用" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option> -->
                <el-option
                  v-for="(label, value) in statussMap"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_maxweight')}：`"
              label-width="120px"
            >
              <el-input size="mini" v-model="form.maxWeight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_explain')}：`"
              label-width="120px"
            >
              <el-input size="mini" v-model="form.explain"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_addpayunit')}：`"
              label-width="120px"
            >
              <el-input size="mini" v-model="form.addPayUnit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_settletype')}：`"
              label-width="120px"
              prop="settleType"
            >
              <el-select
                size="mini"
                v-model="form.settleType"
                placeholder="请选择结算方式"
              >
                <el-option
                  v-for="(label, value) in settleTypesMap"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_bulkfactorrule')}：`"
              label-width="120px"
              prop="bulkfactorRule"
            >
              <el-select
                size="mini"
                v-model="form.bulkfactorRule"
                placeholder="请选择体积重规则"
              >
                <el-option
                  v-for="(label, value) in volumerulesMap"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_remotezoneplanids')}：`"
              label-width="120px"
            >
              <el-select
                size="mini"
                v-model="form.remoteZonePlanIds"
                placeholder="请选择"
                multiple
                @change="handleChange"
              >
                <el-option
                  v-for="(label, value) in remoteZoneNamesMap"
                  :key="value"
                  :label="label"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              :label="`${m('packproduct_setting_changelable')}：`"
              label-width="120px"
              prop="changeLable"
            >
              <el-select
                size="mini"
                v-model="form.changeLable"
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="margin-top" v-if="queryProductPrice">
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">价格表</span>
      </div>
      <TableComponent
        :tableData="queryProductPrice.tableData"
        :tableColumns="queryProductPrice.tableColumns"
        :priceCategorysMap="priceCategorysMap"
        :zonePlansMap="zonePlansMap"
      />
      <!-- <TableComponent
        :tableColumns="tableInfo.channelChargingSections"
        :tableData="queryProductPrice.tableData"
        :channelFormulaMap="tableInfo.channelFormulaMap"
      /> -->
    </el-card>
  </div>
</template>

<script>
import { m } from "@/store/yg/common/local";
import { ajax } from "@/store/yg/common/utils";
import { clone } from "@/utils/clone";
import TableComponent from "./TableComponent";

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      activeName: "11",
      form: {
        shippingTypeId: "99",
        status: "",
        name: "",
        code: "",
        arriveTime: "",
        settleType: "",
        addPayUnit: "",
        minWeight: "",
        maxWeight: "",
        bulkfactorRule: "",
        apiService: "",
        explain: "",
        remoteZonePlanIds: [],
        changeLable: ""
      },
      apiServicesMap: [],
      packProductsMap: [],
      priceCategorysMap: [],
      specialProducts: [],
      priceTypeMap: [],
      settleTypesMap: [],
      shippingTypesMap: [],
      statussMap: [],
      zonePlansMap: [],
      remoteZoneNamesMap: [],
      volumerulesMap: [],
      rules: {
        channelType: [
          { required: true, message: "请选择产品类型", trigger: "change" }
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        name: [{ required: true, message: "请填写产品名称", trigger: "blur" }],
        code: [{ required: true, message: "请选择产品代码", trigger: "blur" }],
        settleType: [
          { required: true, message: "请选择体结算方式", trigger: "change" }
        ],
        bulkfactorRule: [
          { required: true, message: "请选择体积重规则", trigger: "change" }
        ],
        changeLable: [{ required: true, message: "请选择", trigger: "change" }]
      },
      queryProductPrice: null
    };
  },
  computed: {},
  props: ["field"],
  mounted() {
    console.log("this.$store.state.edit.row", this.$store.state.edit.row);
    this.init();
    // 存在即是编辑
    if (this.$store.state.edit.row.shippingTypeId) {
      const form = this.$store.state.edit.row;
      this.form.shippingTypeId = form.shippingTypeId;
      this.form.status = form.status.toString();
      this.form.name = form.name;
      this.form.code = form.code;
      this.form.arriveTime = form.arriveTime;
      this.form.settleType = form.settleType.toString();
      this.form.addPayUnit = form.addPayUnit;
      this.form.minWeight = form.minWeight;
      this.form.maxWeight = form.maxWeight;
      this.form.bulkfactorRule = form.bulkfactorRule.toString();
      this.form.apiService = form.apiService;
      this.form.explain = form.explain;
      let arr = [];
      for (const i of form.remoteZonePlanIds) {
        arr.push(i.toString());
      }
      this.form.remoteZonePlanIds = arr;
      this.form.changeLable = form.changeLable.toString();
    }
  },

  methods: {
    async init() {
      let intPackProductData = localStorage.getItem("intPackProductData");
      if (intPackProductData && intPackProductData !== "null") {
        intPackProductData = JSON.parse(intPackProductData);
      } else {
        intPackProductData = await ajax("intPackProductData", {});
        if (intPackProductData.code === 200) {
          localStorage.removeItem("intPackProductData");
          localStorage.setItem(
            "intPackProductData",
            JSON.stringify(intPackProductData.data)
          );
        } else {
          this.$message.error(intPackProductData.message);
        }
      }

      this.apiServicesMap = intPackProductData.apiService;
      this.packProductsMap = intPackProductData.packProductsMap;
      this.priceCategorysMap = intPackProductData.priceCategorysMap;
      this.specialProducts = intPackProductData.specialProducts;
      this.priceTypeMap = intPackProductData.priceTypeMap;
      this.settleTypesMap = intPackProductData.settleTypesMap;
      this.shippingTypesMap = intPackProductData.shippingTypesMap;
      this.remoteZoneNamesMap = intPackProductData.remoteZoneNamesMap;
      this.volumerulesMap = intPackProductData.volumerulesMap;
      this.statussMap = intPackProductData.statussMap;
      this.zonePlansMap = intPackProductData.zonePlansMap;

      // const allProduct = await ajax("getAllProduct", {});
      // console.log(
      //   "%callProduct: ",
      //   "color: MidnightBlue; background: Aquamarine;",
      //   allProduct
      // );
      // const ById = await ajax("queryProductPriceById", {
      //   id: this.$store.state.edit.row.id
      // });
      const { data } = await ajax("queryProductPriceById", {
        id: this.$store.state.edit.id
      });
      console.log(
        "%callProduct: ",
        "color: MidnightBlue; background: Aquamarine;",
        data
      );

      let tableColumns = [];
      let tableData = [];
      let cdate = "";
      for (const i of data) {
        let col = [];
        for (const j of i.zoneProductPrices) {
          let data = {};
          let columns = {};
          for (const k in j) {
            data.zonePlanId = j[0].zonePlanId;

            data[
              `${j[k].type}_${j[k].category}_${j[k].startWeight}_${j[k].endWeight}`
            ] = j[k].priceValue;
          }
          col.push(data);
        }
        console.log("col", col);
        tableData = [...col];
      }

      let arr = [];

      for (const j in tableData[0]) {
        console.log(j);
        if (j !== "zonePlanId") {
          arr.push({
            prop: j
          });
        }
      }
      console.log("arr", arr);
      this.queryProductPrice = {
        tableData: tableData,
        tableColumns: arr
      };
    },
    m(k) {
      return m(k);
    },
    callbefore() {
      this.$store.state.edit.row = this.form;
      console.log("submit", this.$store.state.edit.row);
    },
    callvalidate() {
      this.$refs.basisForm.validate(valid => {
        if (valid) {
          console.log("submit");
          const cloneData = clone(this.form);
          this.form.id = this.$store.state.edit.id;
        } else {
          console.log("error submit!!");

          return false;
        }
      });

      return true;
    },
    handleClick(tab) {
      ajax("queryChannelById", {
        customerChannelId: this.$store.state.edit.row.id,
        consignmentPlaceId: parseInt(tab.name)
      })
        .then(res => {
          this.tableInfo = res;
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleChange(data) {
      console.log(data);
      console.log("duoxuan".this.form.remoteZonePlanIds);
    }
  }
};
</script>

<style scoped>
/deep/.el-select {
  width: 100%;
}
</style>
